<template>
	<view class="main dispaly flex-warp">
		<view class="img" v-for="(item, index) in imgUrlList" :key="item">
			<image class="cover" :src="item" mode="aspectFill"></image>
			<view class="close" @click="deleteImage(index)">
				<image src="/static/icon/close.png" mode="aspectFill"></image>
			</view>
		</view>
		<view class="up" v-if="imgUrlList.length < props.number">
			<image src="/static/icon/add.png" mode="aspectFill" @click="upload"></image>
		</view>
	</view>
</template>

<script setup>
	import {
		dUpload
	} from '@/utils/util.js'
	import {
		ref
	} from 'vue';

	const props = defineProps({
		number: {
			type: String,
			default: 1
		}
	})
	// 图片上传
	let imgUrlList = ref([
		"https://mangzhuang.xinguanghudong.com/profile//2024/08/08/O1ZAUTnqVLoE7e6ab6d97357b7d575d9dcbbfccb7819_20240808175234A002.png",
		"https://mangzhuang.xinguanghudong.com/profile//2024/08/08/O1ZAUTnqVLoE7e6ab6d97357b7d575d9dcbbfccb7819_20240808175234A002.png"
	])
	const upload = async () => {
		const res = await dUpload(4)
		imgUrlList.value.push(res)
		console.log(imgUrlList.value, 'imgUrlList')
	}

	const deleteImage = (index) => {
		imgUrlList.value.splice(index, 1)
	}
</script>

<style lang="scss" scoped>
	.main {
		.up {
			margin: 8rpx;

			image {
				width: 144rpx;
				height: 144rpx;
			}
		}

		.img {
			position: relative;

			.cover {
				margin: 8rpx;
				width: 144rpx;
				height: 144rpx;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
			}

			.close {
				position: absolute;
				top: -7rpx;
				right: -13rpx;

				image {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	}
</style>